<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/js/bootstrap-wysihtml5/bootstrap-wysihtml5.css"/>
<!--////	alert(JSON.stringify(response));-->

<body class="panel" style="padding:20px;">
<div class="row">
    <div class="col-sm-12">
        <div class="panel-body">
            <div class="center-panel">
                <div id="signupForm" class="form-horizontal adminex-form">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <select id="basicInfoType" name="basicInfoType" class="form-control">
                                    <option value='*'>全部类别</option>
                                    <option value="appver">版本号</option>
                                    <option value="bundleId">包名</option>
                                    <option value="system">系统</option>
                                    <option value="osversion">系统版本号</option>
                                    <option value="brand">手机厂商名</option>
                                    <option value="model">手机型号</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <button type="button" class='btn btn-success  btn-sm' onclick="currentPage=1;filterType()">查询</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10"></div>
                    <div class="col-md-2" align="right"><button data-toggle="modal" href="#myModal" class="btn btn-success  btn-sm" onclick="currentId = 0;clearForm();">新增</button></div>

                </div>
            </div>

            <div class="tab-content">
                <table class="display table" width="100%">
                    <thead>
                    <tr>
                        <th width="10%">序号</th>
                        <th width="20%">所属平台</th>
                        <th width="20%">类型</th>
                        <th width="20%">值</th>
                        <th width="20%" align="right" contenteditable="false"> </th>
                    </tr>
                    </thead>
                    <tbody id="basicInfoList">
                    </tbody>
                </table>
            </div>


            <footer>
                <label>
                    <select class="form-control" id="stepInput" onchange="currentPage = 1;changeStep(false)" size="1" name="hidden-table-info_length" aria-controls="hidden-table-info">
                        <option value="10" selected="selected">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select> records per page</label>

                <div id="pageLabelDiv" class="dataTables_paginate paging_bootstrap pagination">
                    <ul>
                    </ul>
                </div>
            </footer>
        </div>

        <!--	//-----------弹出创建的窗口------start------------>
        <div class="modal fade" id="myModal" tabindex="-100" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="addAPIUserTitle">添加基础信息</h4>
                    </div>

                    <div class="modal-body row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>所属平台</label>
                                <select id="basicSystem" name="basicSystem" class="form-control">
                                    <option value="0">iphone</option>
                                    <option value="1">android</option>
                                    <option value="2">ipad</option>
                                    <option value="3">android pad</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>类型</label>
                                <select id="basicType" name="basicType" class="form-control">
                                    <option value="appver">版本号</option>
                                    <option value="bundleId">包名</option>
                                    <option value="system">系统</option>
                                    <option value="osversion">系统版本号</option>
                                    <option value="brand">手机厂商名</option>
                                    <option value="model">手机型号</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>类型值</label>
                                <input type="text" class="form-control" id="basicValue" />
                            </div>
                        </div>
                    </div>

                    <div class="modal-body row">
                        <div class="col-md-5">

                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-success  btn-sm" onclick="saveNewitem()">保存</button>
                        </div>
                        <div class="col-md-5">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--   //-----------弹出创建的窗口------end----------      -->

    </div>
</div>

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>
<script src="/js/jquery.ajaxfileupload.js"></script>
<script src="/js/ajaxfileupload.js"></script>
<!--dynamic table initialization -->
<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>
<script src="/js/jquery.isotope.js"></script>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>

<script type="text/javascript" src="/js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="/js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>


<script>
    jQuery(document).ready(function () {
        $('.wysihtml5').wysihtml5({
            "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
            "emphasis": true, //Italics, bold, etc. Default true
            "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
            "html": false, //Button which allows you to edit the generated HTML. Default false
            "link": true, //Button to insert a link. Default true
            "image": false, //Button to insert an image. Default true,
            "color": false //Button to change color of font
        });
    });

    //页面载入后先获取默认条数的数据
    window.onload = function () {
        host = "http://" + window.location.host;
        getList(currentPage, step, '*');
    };


    var currentPage = 1
    var step = 10
    var selectBody
    var tablebody
    var currentListData
    var currentType
//    var allType
    var totalCount = 0

    var adddata
    var host
    var currentId = -1

    function getList(page, step, currentType) {
        $.get(host + "/list_basic_info/" + page + "/step/" + step + "/type/" + currentType, null, listToSuccess, "json");
        currentPage = page;
    }
    //从数据库中获取列表成功
    function listToSuccess(response, status, xhr) {
        if (status == "success" && response.reusltCode == "200") {
            currentListData = response.reusltDetail;
            totalCount = response.totalCount;
            clearDataTable();
            changeStep(true);
            fillTable();
            parent.setMainContentHeight(currentListData.length, 52);
        } else {
            alert(response);
        }
    }


    //清空数据表格
    function clearDataTable() {
        tablebody = $("#basicInfoList");
        tablebody.empty();
    }


    //每页的条数发生改变时  重新计算分页条数
    function changeStep(onlyChangeStep) {
        var pagelabelDiv = $("#pageLabelDiv ul");
        pagelabelDiv.empty();
        var stepinput = document.getElementById("stepInput")
        step = parseInt(stepinput.options[stepinput.selectedIndex].value);
        var pageNum = Math.ceil(totalCount / step);
        var currentType = $('#basicInfoType option:selected').val();
        if (currentPage <= 1) {
            pagelabelDiv.append('<li class="prev disabled"><a href="#">← Previous</a></li>')
        } else {
            pagelabelDiv.append('<li class="prev" onclick="getList(' + (currentPage - 1) + ',' + step + ', \'' + currentType + '\')" ><a href="#">← Previous</a></li>')
        }
        if (pageNum > 6) {
            for (var i = 1; i <= pageNum; i++) {
                if ((i) == currentPage) {
                    pagelabelDiv.append('<li class="active"><a   >' + (i) + '</a></li>')
                } else if ((i <= 2)) {
                    pagelabelDiv.append('<li onclick="getList(' + i + ',' + step + ', \'' + currentType + '\')"><a  href="#">' + (i) + '</a></li>')
                } else if ((i >= currentPage - 1 && (i <= currentPage + 1)) || (i > pageNum - 2)) {
                    pagelabelDiv.append('<li onclick="getList(' + i + ',' + step + ', \'' + currentType + ' \')"><a  href="#">' + (i) + '</a></li>')
                }
            }

        } else {
            for (var i = 1; i <= pageNum; i++) {
                if ((i) == currentPage) {
                    pagelabelDiv.append('<li class="active"><a   >' + (i) + '</a></li>')
                } else {
                    pagelabelDiv.append('<li onclick="getList(' + i + ',' + step + ', \'' + currentType + '\')"><a  href="#">' + (i) + '</a></li>')
                }
            }
        }
        if (currentPage >= pageNum) {
            pagelabelDiv.append('<li class="next disabled"><a href="#">Next → </a></li>')
        } else {
            pagelabelDiv.append('<li class="next" onclick="getList(' + (currentPage + 1) + ',' + step + ', \'' + currentType + '\')" ><a href="#">Next → </a></li>')
        }
        if (onlyChangeStep == false) {
            getList(currentPage, step, currentType);
        }
    }

    var typeChinese = {
        "appver": "版本号",
        "bundleId": "包名",
        "system": "系统",
        "osversion": "系统版本号",
        "brand": "手机厂商名",
        "model": "手机型号",
    }
    //手机端策略，系统对应值必须是这些值
    var systemValue = {
        0 : "Iphone",
        1 : "Android",
        2 : "Ipad",
        3 : "AndroidPad",
    }
    //采用本地数组中的数据填充表格
    function fillTable() {
        adddata = "";
        $.each(currentListData, function(index, item) {
            adddata += ("<tr ");

            adddata += ("<tr name=" + index + ">");
            adddata += ("<td>" + (index+1) + "</td>");
            adddata += ("<td>" + systemValue[item.system] + "</td>");
            adddata += ("<td>" + typeChinese[item.type] + "</td>");
            adddata += ("<td>" + item.value + "</td>");
            adddata += ("<td align='right'> " +
            "<a data-toggle='modal' href='#myModal'  class='tn btn-success btn-sm' onclick='editItem(" + index + ")' >编辑</a> " +
            "<a data-toggle='modal' href='#setApiUserModal'  class='tn btn-warning btn-sm' onclick='deleteItem(" + item.id  + ")' >删除</a>" +
            "</td>");
            adddata += ("</tr>");
        });
        tablebody.append(adddata);
    }

    //点击查询按钮
    function filterType() {
        currentType =  $('#basicInfoType option:selected').val();
        getList(currentPage, step, currentType)
//        $.get(host + "/list_basic_info/" + currentPage + "/step/" + step + "/type/" + currentType, null, listToSuccess, "json");
    }

    //清空表单
    function clearForm() {
        document.getElementById("basicType").value = "";
        document.getElementById("basicValue").value = "";
    }


    //点击编辑按钮的时候
    function saveNewitem() {

        var cType = document.getElementById("basicType").value;
        currentType = cType;
        var currentdata = new Object();
        currentdata.id = currentId;
        currentdata.system = document.getElementById("basicSystem").value;
        currentdata.type = cType;
        currentdata.value = document.getElementById("basicValue").value;
        if (currentdata.system == "") {
            document.getElementById("basicValue").focus();
            alert("所属平台必须填写");
            return;
        }else {
            currentdata.system = parseInt(document.getElementById("basicSystem").value,10)
        }

        if (currentdata.type == "") {
            document.getElementById("basicType").focus();
            alert("类型必须填写");
            return;
        }
        if (currentdata.value == "") {
            document.getElementById("basicValue").focus();
            alert("类型的值必须填写");
            return;
        }

        currentdata.page = currentPage;
        currentdata.step = step;
        $.ajaxSetup({
            contentType: 'application/json'
        });
        $.post(host + "/add_basic_info", JSON.stringify(currentdata), returnSuccess, "json");

    }
    //保存成功
    function returnSuccess(response, status, xhr) {
        if(status == "success" && response.reusltCode == "200") {
            getList(currentPage, step, currentType);
            currentId = 0;
            currentListData = response.reusltDetail;
            $('#myModal').modal('hide');
            alert("操作成功！");
        } else {
            alert(response);
        }
    }

    //点击编辑按钮的时候
    function editItem(i) {
        currentTabIndex = i;
        currentId = currentListData[i].id;
        $("#basicSystem").val(currentListData[i].system);
        $("#basicType").val(currentListData[i].type);
//        document.getElementById("basicType").value = currentListData[i].type;
        document.getElementById("basicValue").value = currentListData[i].value;
    } //点击编辑按钮的时候

    
    function deleteItem(i) {
        if (confirm('确定要删除？')) {
            $.ajax({
                url: host + "/delete_basic_info/" + i,
                type: 'DELETE',
                success: function(response, status, xhr) {
                    var currentType = $('#basicInfoType option:selected').val();
                    if(status == "success" && response.reusltCode == "200") {
                        getList(currentPage, step, currentType);
                        currentId = 0;
                        currentListData = response.reusltDetail;
                        alert("删除成功！");
                    } else {
                        alert(response);
                    }
                },
            });
        }

    }





</script>

</body>